<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <div class="container">
      <!-- 导航 -->
      <div class="matched" v-if="$route.query.id">
        <span>&emsp;学科管理 &emsp; </span>
        <span class="el-icon-arrow-right"></span>
        <span>&emsp;{{ $route.query.name }}&emsp;</span>
        <span class="el-icon-arrow-right"></span>
        <span> &emsp;标签管理 &emsp;</span>
      </div>
      <div class="header">
        <!-- 左边 -->
        <div class="searchSub">
          <el-form :model="searchForm" ref="form" :rules="searchRules" label-width="80px" :inline="false" size="normal" class="formStyle">
            <el-form-item label="标签名称">
              <el-input type="text" v-model="searchForm.tagName" size="small" clearable @clear="quitSearch"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="searchForm.state" placeholder="请选择" size="small">
                <el-option label="启用" value="1"> </el-option>
                <el-option label="屏蔽" value="0"> </el-option>
              </el-select>
            </el-form-item>
            <el-button @click="quitSearch" size="small" class="btnStyle">清除</el-button>
            <el-button type="primary" size="small" @click="searchSubjects" class="btnStyle">搜索</el-button>
          </el-form>
        </div>
        <!-- 右边 -->
        <div class="addSub">
          <el-button type="text" v-if="$route.query.id" @click="$router.back()">
            <i class="el-icon-back"></i>
            返回学科
          </el-button>
          <el-button type="success" @click="addSubjects">
            <i class="el-icon-edit"></i>
            <span>新增标签</span>
          </el-button>
        </div>
      </div>
      <!-- 提示 -->
      <div class="noticeSub">
        <el-alert :title="`数据一共${total}条`" type="info" show-icon> </el-alert>
      </div>
      <!-- 表格 -->
      <div class="detail">
        <el-table :data="detailList" stripe>
          <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>
          <el-table-column label="所属学科" align="center" prop="subjectName"></el-table-column>
          <el-table-column label="标签名称" align="center" prop="tagName"></el-table-column>
          <el-table-column label="创建者" align="center" prop="username"></el-table-column>
          <el-table-column label="创建日期" align="center" prop="totals">
            <template slot-scope="scope">
              {{ scope.row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" prop="state">
            <template slot-scope="slot">
              <span v-if="slot.row.state == 1">已启用</span>
              <span v-else>已禁用</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="200">
            <template slot-scope="scope">
              <div v-if="scope.row.state">
                <el-button type="text" @click="stateChange(scope.row)">禁用</el-button>&emsp; <el-button type="text" disabled>修改</el-button>&emsp;
                <el-button type="text" disabled>删除</el-button>&emsp;
              </div>
              <div v-else>
                <el-button type="text" @click="stateChange(scope.row)">启用</el-button>&emsp; <el-button type="text" @click="editSubjects(scope.row)">修改</el-button>&emsp;
                <el-button type="text" @click="delSubjects(scope.row.id)">删除</el-button>&emsp;
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          v-if="!$route.query.id"
          background
          layout="->,prev, pager, next,total,sizes,jumper "
          :total="total"
          :page-sizes="[5, 10, 15, 20, 30]"
          @size-change="sizeChange"
          @current-change="pageChange"
        >
        </el-pagination>
      </div>

      <!-- 新增目录弹框 -->
      <el-dialog :title="isAdd ? '新增标签' : '修改标签'" :visible.sync="addDialogVisible" width="20%" @close="cancel" destroy-on-close>
        <el-form :model="editForm" ref="form" :rules="searchRules" label-width="80px" :inline="false" size="normal">
          <el-form-item label="所属学科">
            <el-select v-model="editForm.subjectID" placeholder="请选择" size="small">
              <el-option v-for="item in subjectList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签名称" prop="tagName">
            <el-input v-model="editForm.tagName" size="small" placeholder="请输入目录名称"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
// 导入方法
import { list, remove, update, add, changeState } from '@/api/hmmm/tags'
import { simple } from '@/api/hmmm/subjects'

const SubjectItem = {
  tagName: null, // 标签名称
  state: null, // 状态
  subjectID: null // 科学科ID
}
const EditItem = {
  tagName: null, // 目录
  subjectID: null // 学科
}
export default {
  data() {
    return {
      addDialogVisible: false, // 添加弹框
      detailList: [],
      subjectList: [],
      searchForm: {
        ...SubjectItem
      },
      // 弹框信息
      editForm: {
        ...EditItem
      },
      page: 1,
      pagesize: 10,
      total: 0,
      isAdd: true,
      id: null,
      // 校验规则
      searchRules: {
        tagName: [{ required: true, message: '请填写', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getQuery()
    // this.loadSubjectsDeatils()
  },
  methods: {
    // 获取页面信息函数
    async loadSubjectsDeatils() {
      let { data: res } = await list({
        page: this.page,
        pagesize: this.pagesize,
        tagName: this.searchForm.tagName,
        state: this.searchForm.state,
        subjectID: this.searchForm.subjectID
      })
      console.log(res)
      this.detailList = res.items
      this.total = res.counts
    },
    async loadSubjectList() {
      try {
        let { data: res } = await simple()
        this.subjectList = res
      } catch (error) {
        this.$message.error('请求数据失败')
      }
    },
    // 数量变化
    sizeChange(val) {
      this.pagesize = val
      this.loadSubjectsDeatils()
    },
    // 页码变化
    pageChange(val) {
      this.page = val
      this.loadSubjectsDeatils()
    },
    // 清除按钮
    quitSearch() {
      this.page = 1
      this.searchForm.tagName = null
      this.searchForm.state = null
      this.loadSubjectsDeatils()
    },
    // 搜索框
    searchSubjects() {
      this.loadSubjectsDeatils() // 发送请求
      // 置空表格
    },
    // 删除学科
    async delSubjects(id) {
      // 询问
      try {
        await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        // 执行删除
        await remove({
          id
        })
        if (this.page !== 1 && this.detailList.length === 1) {
          this.page--
        }
        this.loadSubjectsDeatils()
        this.$message.success('删除成功')
      } catch (error) {
        this.$message.info('取消删除')
      }
    },
    // 添加按钮
    addSubjects() {
      this.loadSubjectList() // 请求下拉分类
      this.addDialogVisible = true // 打开弹框
    },
    // 编辑按钮
    editSubjects(val) {
      this.loadSubjectList() // 请求下拉分类
      this.addDialogVisible = true // 打开弹框
      this.isAdd = false // 功能变为编辑
      this.id = val.id // 传递id
      // 回显
      this.editForm = { ...val }
    },
    // 弹框提交事件
    async onSubmit() {
      try {
        if (this.isAdd) {
          await add(this.editForm)
        } else {
          let { data: res } = await update({
            tagName: this.editForm.tagName,
            subjectID: this.editForm.subjectID,
            id: this.id
          })
          console.log(res)
        }
        this.$message.success(this.isAdd ? '添加成功' : '修改成功')
        this.loadSubjectsDeatils() // 更新视图
        this.addDialogVisible = false // 关闭弹框
        this.editForm = { ...EditItem } // 表单置空
        this.isAdd = true // 功能重置
      } catch (error) {
        console.log(error)
        this.$message.error(this.isAdd ? '添加失败' : '修改失败')
      }
    },
    // 弹框取消
    cancel() {
      this.addDialogVisible = false
      this.editForm = { ...EditItem } // 表单置空
      this.isAdd = true // 功能充值
    },
    // 状态修改
    stateChange(val) {
      try {
        if (val.state === 1) {
          // 1 为启用，点击就需要禁用

          changeState({
            id: val.id,
            state: (val.state = 0)
          })
        } else {
          // 0 为禁用，点击就需要启用
          changeState({
            id: val.id,
            state: (val.state = 1)
          })
        }
        // 视图更新
        val.state === 1 ? 0 : 1
        this.$message.success('修改成功')
      } catch (error) {
        this.$message.error('修改失败')
      }
    },
    getQuery() {
      // 在created环节获取传递过来的参数
      // 利用传递的参数发送一次数据请求
      const res = this.$route.query
      this.searchForm.subjectID = res.id
      this.loadSubjectsDeatils()
    }
  }
}
</script>

<style scoped  >
.matched {
  padding-bottom: 10px;
  border-bottom: 1px solid red;
  font-size: 14px;
  font-weight: 400px;
  color: #606266;
}
.header {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
.formStyle {
  display: flex;
  justify-content: flex-start;
}

.addSub {
  margin-right: 30px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.noticeSub {
  margin-left: 30px;
  margin-bottom: 20px;
}
.btnStyle {
  margin-top: 4px;
  margin-left: 10px;
  width: 56px;
  height: 32px;
}
</style>

